<template>
  <div>
    <div class="top">
        <span>我的评价</span>
        <span>></span>
    </div>
    <div class="dianpu" v-for="(item,index) in arr" :key="index">
        <div class="name">
            <span>{{item.name}}</span>
        </div>
        <div class="box">
            <div class="img">
                <img :src="item.img" alt="">
            </div>
            <div class="txt">
                <span>{{item.year}}</span>
                <span>{{item.time}}</span>
                <span>下单</span>
            </div>
            <div class="zz">
                <div>{{item.zi}}</div>
            </div>
        </div>
        <div class="p">评价</div>
    </div>
  </div>
</template>

<script>
import service from '../dmh/ulits/request'
export default {
data() {
    return {
        arr:[]
    }
},
mounted() {
    // 发请求
         service({
      url: "http://localhost:3000/sc",
      method: "get",
    }).then((res) => {
      console.log(res.data)
      this.arr = res.data;
    });
},
}
</script>

<style scoped>
.top{
    height: 50px;
    margin: 10px 10px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}
.top :nth-child(1){
    height: 50px;
    font-weight: 700;
    line-height: 50px;
    margin-left: 10px;
}
.top :nth-child(2){
    font-size: 30px;
    line-height: 50px;
    margin-right: 10px;
    color: rgb(183, 186, 186);
}
.dianpu{
    background-color: white;
    margin: 10px 10px;
    border-radius: 10px;
    height: 160px;
}
.dianpu .name{
    height: 40px;
    border-bottom: 1px solid rgb(205, 207, 207);
}
.dianpu .name span{
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
}
.box .img{
    width: 80px;
    height: 50px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
}
.box .img img{
    width: 100%;
    height: 60px;
}
.box .txt{
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    width: 240px;
}
.box .txt span{
    margin-left: 5px;
    color: rgb(175, 179, 179);
}
.box .zz{
    margin-top: 5px;
    color: orange;
}
.box .zz div{
    margin-left: 100px;
}
.dianpu .p{
    margin-top: 15px;
    margin-left: 240px;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    border: 1px solid rgb(182, 183, 183);
    color: red;
}
</style>